<!DOCTYPE html>
<!-- saved from url=(0079)http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/filter.htm -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>jQuery MultiSelect Widget Demo</title>
<link rel="stylesheet" type="text/css" href="jquery.multiselect.css">
<link rel="stylesheet" type="text/css" href="jquery.multiselect.filter.css">
<link rel="stylesheet" type="text/css" href="style2.css">
<link rel="stylesheet" type="text/css" href="prettify.css">
<link rel="stylesheet" type="text/css" href="jquery-ui.css">
<script type="text/javascript" src="jquery(1).js"></script><style type="text/css"></style>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.multiselect.js"></script>
<script type="text/javascript" src="jquery.multiselect.filter.js"></script>
<script type="text/javascript" src="prettify.js"></script>
</head>
<body onload="prettyPrint();" marginwidth="10" marginheight="10">

<h2>Filter Plugin</h2>

<p>Filtering is available by including the <a href="http://github.com/ehynds/jquery-ui-multiselect-widget/raw/master/src/jquery.multiselect.filter.js">jquery.multiselect.filter.js</a> plugin and the <a href="http://github.com/ehynds/jquery-ui-multiselect-widget/raw/master/jquery.multiselect.filter.css">jquery.multiselect.filter.css</a> CSS file.  Initialize filtering on any of your multiselects by calling <code class="prettyprint"><span class="pln">multiselectfilter</span><span class="pun">()</span></code> on the widget.</p>

<pre class="prettyprint"><span class="pln">$</span><span class="pun">(</span><span class="str">"select"</span><span class="pun">).</span><span class="pln">multiselect</span><span class="pun">().</span><span class="pln">multiselectfilter</span><span class="pun">();</span></pre>

<form style="margin:20px 0">
	<p>
		<select multiple="multiple" style="width: 370px; display: none;">
		<option value="red">Red</option>
		<option value="green">Green</option>
		<option value="blue">Blue</option>
		<option value="orange">Orange</option>
		<option value="purple">Purple</option>
		<option value="yellow">Yellow</option>
		<option value="brown">Brown</option>
		<option value="black">Black</option>
		</select><button type="button" class="ui-multiselect ui-widget ui-state-default ui-corner-all" aria-haspopup="true" style="width: 364px;"><span class="ui-icon ui-icon-triangle-2-n-s"></span><span>Select options</span></button>
	</p>
	<p>
		<select multiple="multiple" style="width: 370px; display: none;">
		<optgroup label="test">
			<option value="red">Red</option>
			<option value="green">Green</option>
			<option value="blue">Blue</option>
		</optgroup>
		<optgroup label="foo">
			<option value="orange">Orange</option>
			<option value="purple">Purple</option>
			<option value="yellow">Yellow</option>
			<option value="brown">Brown</option>
			<option value="black">Black</option>
		</optgroup>
		</select><button type="button" class="ui-multiselect ui-widget ui-state-default ui-corner-all" aria-haspopup="true" style="width: 364px;"><span class="ui-icon ui-icon-triangle-2-n-s"></span><span>Select options</span></button>
	</p>
</form>

<h3>Options:</h3>

<p>Pass any of these as a configuration object when you initialize <code>multiselectfilter()</code>:</p>
<ul>
<li><code><strong>label</strong></code><p>The text to appear left of the input.  Defaults to "Filter:"</p></li>
<li><code><strong>width</strong></code><p>The width of the input in pixels.  Defaults to 100px in the style sheet, but you can override this for each instance.</p></li>
<li><code><strong>placeholder</strong></code><p>The HTML5 placeholder attribute value of the input.  Only supported in webkit as of this writing.  Defaults to "Enter keywords"</p></li>
<li><code><strong>autoReset</strong></code><p>A boolean value denoting whether or not to reset the search box &amp; any filtered options when the widget closes. Defaults to false.</p></li>
</ul>

<h3>Events:</h3>
<ul>
<li><code><strong>filter</strong></code>
	<p>A callback function that fires after filtering is complete.  Accepts two arguments: the original event and an array of matches.</p>
	
	<p>To do something when no matches are found:</p>
	
<pre class="prettyprint"><span class="pln">$</span><span class="pun">(</span><span class="str">"select"</span><span class="pun">).</span><span class="pln">multiselect</span><span class="pun">().</span><span class="pln">multiselectfilter</span><span class="pun">({</span><span class="pln"><br>&nbsp; &nbsp; filter</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="kwd">event</span><span class="pun">,</span><span class="pln"> matches</span><span class="pun">){</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="kwd">if</span><span class="pun">(</span><span class="pln"> </span><span class="pun">!</span><span class="pln">matches</span><span class="pun">.</span><span class="pln">length </span><span class="pun">){</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="com">// do something</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="pun">}</span><span class="pln"><br>&nbsp; &nbsp; </span><span class="pun">}</span><span class="pln"><br></span><span class="pun">});</span></pre>

	<p>To do something with a match:</p>
	
<pre class="prettyprint"><span class="pln">$</span><span class="pun">(</span><span class="str">"select"</span><span class="pun">).</span><span class="pln">multiselect</span><span class="pun">().</span><span class="pln">multiselectfilter</span><span class="pun">({</span><span class="pln"><br>&nbsp; &nbsp; filter</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="kwd">event</span><span class="pun">,</span><span class="pln"> matches</span><span class="pun">){</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br>&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="com">// find the first matching checkbox</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="kwd">var</span><span class="pln"> first_match </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="pln"> matches</span><span class="pun">[</span><span class="lit">0</span><span class="pun">]</span><span class="pln"> </span><span class="pun">);</span><span class="pln"><br>&nbsp; &nbsp; </span><span class="pun">}</span><span class="pln"><br></span><span class="pun">});</span></pre>

	<p>You can also bind to the event after a multiselect has been initialized, like such:
	
</p><pre class="prettyprint"><span class="pln">$</span><span class="pun">(</span><span class="str">"select"</span><span class="pun">).</span><span class="pln">bind</span><span class="pun">(</span><span class="str">"multiselectfilterfilter"</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="kwd">event</span><span class="pun">,</span><span class="pln"> matches</span><span class="pun">){</span><span class="pln"><br>&nbsp; &nbsp; </span><span class="com">// do something</span><span class="pln"><br></span><span class="pun">});</span></pre>
	
</li>
</ul>

<h3>Methods</h3>
<p>Syntax: <code class="prettyprint"><span class="pln">$</span><span class="pun">(</span><span class="str">"select"</span><span class="pun">).</span><span class="pln">multiselectfilter</span><span class="pun">(</span><span class="str">"method_name"</span><span class="pun">);</span></code></p>
<ul>
<li><code><strong>updateCache</strong></code><p>Reloads the cache of values to search against.  Make sure you call this after dynamically adding or removing any inputs to the multiselect.</p></li>
<li><code><strong>destroy</strong></code><p>Destroys the widget.</p></li>
<li><code><strong>widget</strong></code><p>Returns the wrapper div with the input and label text inside.  This is a quick and easy way to access the HTML created by the plugin.</p></li>
</ul>

<script type="text/javascript">
$("select").multiselect().multiselectfilter();
</script><div class="ui-multiselect-menu ui-widget ui-widget-content ui-corner-all" style="width: 356px; top: 157px; left: 10px; display: none;"><div class="ui-widget-header ui-corner-all ui-multiselect-header ui-helper-clearfix ui-multiselect-hasfilter"><div class="ui-multiselect-filter">Filter:<input placeholder="Enter keywords" type="search"></div><ul class="ui-helper-reset"><li><a class="ui-multiselect-all" href="http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/filter.htm#"><span class="ui-icon ui-icon-check"></span><span>Check all</span></a></li><li><a class="ui-multiselect-none" href="http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/filter.htm#"><span class="ui-icon ui-icon-closethick"></span><span>Uncheck all</span></a></li><li class="ui-multiselect-close"><a href="http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/filter.htm#" class="ui-multiselect-close"><span class="ui-icon ui-icon-circle-close"></span></a></li></ul></div><ul class="ui-multiselect-checkboxes ui-helper-reset" style="height: 175px;"><li class=" "><label for="ui-multiselect-0-option-0" title="" class="ui-corner-all ui-state-hover"><input id="ui-multiselect-0-option-0" name="multiselect_0" type="checkbox" value="red" title="Red"><span>Red</span></label></li><li class=" "><label for="ui-multiselect-0-option-1" title="" class="ui-corner-all"><input id="ui-multiselect-0-option-1" name="multiselect_0" type="checkbox" value="green" title="Green"><span>Green</span></label></li><li class=" "><label for="ui-multiselect-0-option-2" title="" class="ui-corner-all"><input id="ui-multiselect-0-option-2" name="multiselect_0" type="checkbox" value="blue" title="Blue"><span>Blue</span></label></li><li class=" "><label for="ui-multiselect-0-option-3" title="" class="ui-corner-all"><input id="ui-multiselect-0-option-3" name="multiselect_0" type="checkbox" value="orange" title="Orange"><span>Orange</span></label></li><li class=" "><label for="ui-multiselect-0-option-4" title="" class="ui-corner-all"><input id="ui-multiselect-0-option-4" name="multiselect_0" type="checkbox" value="purple" title="Purple"><span>Purple</span></label></li><li class=" "><label for="ui-multiselect-0-option-5" title="" class="ui-corner-all"><input id="ui-multiselect-0-option-5" name="multiselect_0" type="checkbox" value="yellow" title="Yellow"><span>Yellow</span></label></li><li class=" "><label for="ui-multiselect-0-option-6" title="" class="ui-corner-all"><input id="ui-multiselect-0-option-6" name="multiselect_0" type="checkbox" value="brown" title="Brown"><span>Brown</span></label></li><li class=" "><label for="ui-multiselect-0-option-7" title="" class="ui-corner-all"><input id="ui-multiselect-0-option-7" name="multiselect_0" type="checkbox" value="black" title="Black"><span>Black</span></label></li></ul></div><div class="ui-multiselect-menu ui-widget ui-widget-content ui-corner-all" style="width: 356px; top: 195px; left: 10px; display: none;"><div class="ui-widget-header ui-corner-all ui-multiselect-header ui-helper-clearfix ui-multiselect-hasfilter"><div class="ui-multiselect-filter">Filter:<input placeholder="Enter keywords" type="search"></div><ul class="ui-helper-reset"><li><a class="ui-multiselect-all" href="http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/filter.htm#"><span class="ui-icon ui-icon-check"></span><span>Check all</span></a></li><li><a class="ui-multiselect-none" href="http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/filter.htm#"><span class="ui-icon ui-icon-closethick"></span><span>Uncheck all</span></a></li><li class="ui-multiselect-close"><a href="http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/filter.htm#" class="ui-multiselect-close"><span class="ui-icon ui-icon-circle-close"></span></a></li></ul></div><ul class="ui-multiselect-checkboxes ui-helper-reset" style="height: 175px;"><li class="ui-multiselect-optgroup-label "><a href="http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/filter.htm#">test</a></li><li class=" "><label for="ui-multiselect-2-option-0" title="" class="ui-corner-all ui-state-hover"><input id="ui-multiselect-2-option-0" name="multiselect_2" type="checkbox" value="red" title="Red"><span>Red</span></label></li><li class=" "><label for="ui-multiselect-2-option-1" title="" class="ui-corner-all"><input id="ui-multiselect-2-option-1" name="multiselect_2" type="checkbox" value="green" title="Green"><span>Green</span></label></li><li class=" "><label for="ui-multiselect-2-option-2" title="" class="ui-corner-all"><input id="ui-multiselect-2-option-2" name="multiselect_2" type="checkbox" value="blue" title="Blue"><span>Blue</span></label></li><li class="ui-multiselect-optgroup-label "><a href="http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/filter.htm#">foo</a></li><li class=" "><label for="ui-multiselect-2-option-3" title="" class="ui-corner-all"><input id="ui-multiselect-2-option-3" name="multiselect_2" type="checkbox" value="orange" title="Orange"><span>Orange</span></label></li><li class=" "><label for="ui-multiselect-2-option-4" title="" class="ui-corner-all"><input id="ui-multiselect-2-option-4" name="multiselect_2" type="checkbox" value="purple" title="Purple"><span>Purple</span></label></li><li class=" "><label for="ui-multiselect-2-option-5" title="" class="ui-corner-all"><input id="ui-multiselect-2-option-5" name="multiselect_2" type="checkbox" value="yellow" title="Yellow"><span>Yellow</span></label></li><li class=" "><label for="ui-multiselect-2-option-6" title="" class="ui-corner-all"><input id="ui-multiselect-2-option-6" name="multiselect_2" type="checkbox" value="brown" title="Brown"><span>Brown</span></label></li><li class=" "><label for="ui-multiselect-2-option-7" title="" class="ui-corner-all"><input id="ui-multiselect-2-option-7" name="multiselect_2" type="checkbox" value="black" title="Black"><span>Black</span></label></li></ul></div>



</body></html>